$(function(){
    //声明一个数组，用来保存所有的搜索关键字
    var keyArr = [];

    //当页面加载成功之后，需要去localStorage中获取所有的关键字，并渲染到页面中
    if( localStorage.getItem("keyWords") ){
        keyArr = JSON.parse(localStorage.getItem("keyWords"));
        console.log(keyArr);
        //要渲染数据到页面中
        var obj = { keyArr:keyArr };
        var str = template("history",obj);
        $("#historySearch").html(str);
    }else{
        //如果是第一次打开页面，localStorage是没有keyWords的
        //所以，可以进行一次初始化
        localStorage.setItem("keyWords","[]");
    }

    //用户点击搜索按钮的时候，拿到用户在文本框中输入的关键字内容
    $("#btnSearch").on("click",function(){
        //获取文本框中输入的搜索关键字
        var txt = $("#keyWord").val();
        if( txt.trim() == "" ){
            //用户没有在文本框中输入内容，提示用户需要输入
            alert("请输入关键字");
        }else{
            //当用户输入内容之后，除了要跳转到search-result.html之外，我们还需要将
            //关键字保存到localStorage
            //将用户新输入的关键字加到数组中
            //判断一下数组中是否已经包含了关键字，如果没有包含才做push
            if(keyArr.indexOf( txt ) >= 0 ){
                //将数组中相同的元素删除掉
                keyArr.splice( keyArr.indexOf( txt ) ,1 );
                //将用户输入的重复数据进行重新的添加
                keyArr.push(txt);
            }else{
                keyArr.push( txt );
            }
            
            //然后再将数组保存到localStorage中
            // localStorage.setItem( "name","jack" )
            localStorage.setItem("keyWords", JSON.stringify(keyArr) );


            //用户已经输入了关键字内容，将这个关键字带到search-result.html
            location.href = "search-result.html?keyWord=" + txt;
        }
    })

    //清空历史
    $(".mui-icon-trash").on("click",function(){
        $("#historySearch").html("");
        localStorage.setItem("keyWords","[]");
        // console.log(keyArr);
        keyArr = [];
    })

})